<template>
    <div class="film-details column">
        <h1>
            <span>来电狂响</span>
            <span class="year">(2018)</span>
        </h1>
        <div class="movie row">
            <img src="../assets/img/card.jpg"
                alt="图片">
            <div class="movie-centent column">
                <span class="row-text">
                    <span>导演:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text">
                    <span>编剧:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text">
                    <span>主演:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text-1">
                    <span>类型:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text-1">
                    <span>制片国家/地区:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text-1">
                    <span>语言:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text-1">
                    <span>上映日期:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text-1">
                    <span>片长:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text-1">
                    <span>又名:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
                <span class="row-text">
                    <span>链接:</span>
                    <a href>特拉维斯·奈特</a>
                </span>
            </div>
            <div class="grad-panle column">
                <span class="title">JJ评分</span>
                <div class="font-strong row">
                    <strong>7.4</strong>
                    <div class="xing">
                        <el-rate :allow-half="true"
                            v-model="value"
                            disabled></el-rate>
                        <a>33421人评价</a>
                    </div>
                </div>
                <div class="column progress">
                    <div class="row">
                        <span>5星</span>
                        <el-progress :percentage="20"
                            :stroke-width="8"
                            color="#8e71c7"></el-progress>
                    </div>
                    <div class="row">
                        <span>4星</span>
                        <el-progress :percentage="30"
                            :stroke-width="8"
                            color="#8e71c7"></el-progress>
                    </div>
                    <div class="row">
                        <span>3星</span>
                        <el-progress :percentage="10"
                            :stroke-width="8"
                            color="#8e71c7"></el-progress>
                    </div>
                    <div class="row">
                        <span>2星</span>
                        <el-progress :percentage="25"
                            :stroke-width="8"
                            color="#8e71c7"></el-progress>
                    </div>
                    <div class="row">
                        <span>1星</span>
                        <el-progress :percentage="15"
                            :stroke-width="8"
                            color="#8e71c7"></el-progress>
                    </div>
                </div>
                <div class="more-good row">
                    <span>好于</span>
                    <a href>74%科幻片</a>
                </div>
            </div>
        </div>
        <div class="btn-comment-list row">
            <a href="javascript:void(0);"
                @click.stop="openLogin">想看</a>
            <a href="javascript:void(0);"
                @click.stop="openLogin">看过</a>
            <span>评价：</span>
            <el-rate v-model="value"></el-rate>
        </div>
        <div class="btn-input-list row">
            <span @click="openComment"><i class="el-icon-edit"></i>写短评</span>
            <span @click="openComment"><i class="el-icon-edit-outline"></i>写影评</span>
            <span><i class="el-icon-plus"></i>提问题</span>
            <span><i class="el-icon-share"></i>分享</span>
        </div>
        <h2 class="title-green">大黄蜂的剧情简介 · · · · · ·</h2>
        <p class="text-p">本片故事设定在1987年，正值青春期的18岁少女查理Charlie（海莉·斯坦菲尔德 饰）在加州海边小镇的废弃场里发现了伤痕累累的大黄蜂，他们之间会发生怎样的故事呢？让我们拭目以待！</p>
        <h2 class="title-green">喜欢这部电影的人也喜欢 · · · · · ·</h2>
        <div class="row movie-list">
            <MovieBaseBox v-for="(item, index) in 10"
                :key="index"
                :info="commentInfo"></MovieBaseBox>
        </div>
        <div class="title-list row">
            <h2>大黄蜂的短评 · · · · · ·</h2>
            <a><i class="el-icon-edit"></i>我要写短评</a>
        </div>
        <BaseCommentCard v-for="(item, index) in 5"
            :key="index"
            :info="comment"></BaseCommentCard>
        <div class="title-list row">
            <h2>关于《大黄蜂》的问题 · · · · · · </h2>
            <a><i class="el-icon-edit"></i>我要提问</a>
        </div>
        <BaseProblem v-for="(item, index) in 5"
            :key="index"></BaseProblem>
        <div class="space"></div>
        <h2>知否知否应是绿肥红瘦的话题 · · · · · · </h2>
        <div class="green-plane">
            <div class="plane-top"><i class="el-icon-close"></i></div>
            <div class="plane-two"><i class="el-icon-question"></i><span>什么是话题</span></div>
            <div class="plane-three">
                <p>无论是一部作品、一个人，还是一件事，都往往可以衍生出许多不同的话题。将这些话题细分出来，分别进行讨论，会有更多收获。</p>
            </div>
            <img src="../assets/img/icon_guide_arrow.png"
                alt="">
        </div>
        <BaseTopic v-for="(item, index) in 5" :key="index" :info="topic"></BaseTopic>
        <div class="bottom">
            <img src="../assets/img/bottom-img1.jpg"
                alt="">
        </div>
        <BaseWindowLogin ref="loginWindow"
            :width="120"></BaseWindowLogin>
        <BaseWindowComment ref="commentWindow"></BaseWindowComment>
    </div>
</template>
<script>
import MovieBaseBox from "@/components/MovieBaseBox"
import BaseCommentCard from "@/components/BaseCommentCard"
import BaseProblem from "@/components/BaseProblem"
import BaseWindowLogin from "@/components/BaseWindowLogin"
import BaseWindowComment from "@/components/BaseWindowComment"
import BaseTopic from "@/components/BaseTopic"
export default {
    name: "film-details",
    components: {
        MovieBaseBox,
        BaseCommentCard,
        BaseProblem,
        BaseWindowLogin,
        BaseWindowComment,
        BaseTopic
    },
    data() {
        return {
            value: 0,
            commentInfo: {
                movieName: "蜘蛛侠:平行宇宙",
                imgUrl: require("../assets/img/card.jpg"),
                imgNumber: 3.5,
                comment:
                    "很多人说用mv的方式拍摄不好，观影体验差，那你们有没有想过，这些小朋友们在拍摄的时候，心里该会有多么的开心，换个角度想想吧 - 霍灵轩的短评",
                auth: "霍灵轩",
                title: "深藏于心的那份青涩"
            },
            comment: {
                movieImg: require("../assets/img/card.jpg"),
                userImg: require("../assets/img/tx.jpg"),
                imgNumber: 3.5,
                userName: "打死不吃西红柿",
                title: "秒速五厘米，灵魂飘落的速度",
                content:
                    "当你走在熙熙攘攘的街头，忽然，一张似曾相识的脸出现在眼帘之中。未及细看，那身影已翩然而过。当你回头，茫茫人海里已无处寻觅，而刚才的邂逅，竟不知是真实存在，还是脑海中的虚幻。猛然间，那个曾经才下眉头却上心头的名字，就这样再次萦绕不去了。 不知道诸位有没有过这种..."
            },
            topic: {
                title: "如何看待《知否知否应是绿肥红瘦》中朱一龙的表演？",
                count: 39,
                peopleNum: "16.8k",
                author: "粟米米米米",
                timeCount: 3,
                content:
                    "看了22集，我觉得在码头送别那段，齐衡其实是宁愿明兰能责怪他几句，这样他还能顺着安慰六妹妹几句，而不像现在这样只能干巴巴地剖白自己的内心，说着自己也没有把握的诺言。这副情状实在太难堪了，我简直要不忍心看下去可是明兰只是淡淡地说，我理解小公爷的难处，大约是我福分浅，小公爷不必放在心上。 明兰把自己对齐衡...",
                useful: "36/37",
                response: 3,
                more: 52,
                userImg: require("../assets/img/tx.jpg")
            }
        }
    },
    methods: {
        openLogin() {
            this.$refs.loginWindow.openView()
        },
        openComment() {
            this.$refs.commentWindow.openView()
        }
    }
}
</script>

<style lang="less" scoped>
    .film-details {
        margin-top: 40px;
        h1 {
            font-size: 26px;
            font-weight: bold;
            color: #494949;
            .year {
                color: #888;
            }
        }
        .movie {
            align-items: flex-start;
            img {
                height: 200px;
            }
            .movie-centent {
                margin-left: 15px;
                width: 360px;
                .row-text {
                    font-size: 13px;
                    span {
                        line-height: 150%;
                        color: #666666;
                    }
                    a {
                        color: #37a;
                        text-decoration: none;
                        &:hover {
                            background: #4b8ccb;
                            color: #fff;
                        }
                    }
                }
                .row-text-1 {
                    font-size: 13px;
                    span {
                        line-height: 150%;
                        color: #666666;
                    }
                    a {
                        color: #111;
                        text-decoration: none;
                    }
                }
            }
            .grad-panle {
                width: 225px;
                margin: 2px 0 0 0;
                padding: 0 0 0 15px;
                border-left: 1px solid #eaeaea;
                color: #9b9b9b;
                .title {
                    font-size: 12px;
                }
                .font-strong {
                    strong {
                        color: #111;
                        font-size: 35px;
                    }
                    .xing {
                        margin-left: 10px;
                        a {
                            font-size: 12px;
                        }
                    }
                }
                .progress {
                    font-size: 13px;
                    width: 100%;
                    padding-bottom: 10px;
                }
                .more-good {
                    padding: 15px 0;
                    border-top: 1px solid #eaeaea;
                    color: #9b9b9b;
                    margin: 0;
                    span {
                        font-size: 13px;
                    }
                    a {
                        font-size: 13px;
                        cursor: pointer;
                        color: #37a;
                        text-decoration: none;
                    }
                }
            }
        }
        .btn-comment-list {
            margin-top: 20px;
            a {
                background: #ffd596;
                display: block;
                padding: 1px 12px 1px 12px;
                line-height: 22px;
                margin: 5px;
                color: #000;
                text-decoration: none;
                font-size: 12px;
                border: 1px sienna solid;
                border-radius: 5px;
            }
            span {
                font-size: 13px;
            }
        }
        .btn-input-list {
            margin-top: 20px;
            span {
                color: #37a;
                text-decoration: none;
                font-size: 13px;
                margin-right: 10px;
                cursor: pointer;
                &:hover {
                    background: #4b8ccb;
                    color: #fff;
                }
                i {
                    color: #666;
                    padding-left: 5px;
                }
            }
        }
        .title-green {
            margin-top: 15px;
            font: 16px Arial, Helvetica, sans-serif;
            color: #072;
        }
        .text-p {
            word-break: break-all;
            color: #111;
            font-size: 13px;
        }
        .movie-list {
            margin-left: -15px;
            width: 800px;
            flex-wrap: wrap;
        }
        .title-list {
            justify-content: space-between;
            margin-top: 15px;
            margin-bottom: 15px;
            h2 {
                font: 16px Arial, Helvetica, sans-serif;
                color: #072;
            }
            a {
                color: #c65e24;
                background-color: rgba(198, 94, 36, 0.15);
                height: auto;
                padding: 7px 12px;
                line-height: 13px;
                float: right;
            }
        }
        .space {
            width: 10px;
            height: 30px;
        }
        .green-plane {
            position: relative;
            color: #333;
            background: rgba(58, 162, 83, 0.1);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            .plane-top {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                .el-icon-close {
                    color: #999999;
                }
            }
            .plane-two {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                font-size: 16px;
                color: #3aa253;
                .el-icon-question {
                    font-size: 20px;
                    padding: 5px;
                }
            }
            .plane-three {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                p {
                    padding-left: 30px;
                    padding-top: 10px;
                    padding-bottom: 20px;
                    font-size: 13px;
                }
            }
            img {
                width: 40px;
                position: absolute;
                left: -20px;
                top: 65px;
            }
        }
        .bottom {
            width: 100%;
            height: 110px;
            margin-bottom: 30px;
        }
    }
</style>
